<template>
	<navigatorComp title="我发布的讣告" bgcColor="#121512" fontColor="#fff" class="header">
	</navigatorComp>
	<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :height='height'>
		<div class="obituary_content_box" v-for="(item,index) in list" :key="index" @click="goPoster(item)">
			<view class="obituary_content_title">
				<text>{{item.decedentName}}讣告</text>
				<image src="http://112.124.50.179:8888/imgs/home/white_more.png" mode="" @click.native.stop="showMore(item)"></image>
			</view>
			<view class="obituary_content_content">
				{{item.decedentTitle}}{{item.decedentName}}于{{formatDate(item.decedentTime)}}在{{item.decedentAddr}}逝世，享年{{item.decedentAge}}岁。兹定于{{formatDate(item.mournTime)}}，在{{item.mournAddr}}设奠追思。
				<view>敬请亲朋好友前来送别。</view>
				<view>敬上。</view>
				<view style="text-align: right; margin-top: 40rpx">{{item.familyName}}</view>
				<view style="text-align: right">{{item.familyPhone}}</view>
				<view style="text-align: right">{{formatDate(item.createdAt)}}</view>
			</view>
		</div>
	</mescroll-uni>
	<u-popup :show="showMoreFunc" bgColor="rgba(0,0,0,0)" @close="closeMore" custom-style="padding:0 16rpx 0;">
		<u-button shape="circle" :custom-style="{
				...moreBtnStyle,
				marginBottom: 0,
				borderEndEndRadius: '0',
				borderEndStartRadius: '0'
			}" @click="goUrl('/subPages/home/obituary/index?id='+clickItem.id);showMoreFunc=false">
			编辑
		</u-button>
		<u-button shape="circle" :custom-style="{
				...moreBtnStyle,
				borderStartEndRadius: '0',
				borderStartStartRadius: '0'
			}" @click="delObituary">
			删除
		</u-button>
		<u-button shape="circle" :custom-style="{ ...moreBtnStyle, fontWeight: 600 }" @click="closeMore">
			取消
		</u-button>
	</u-popup>

	<!-- 删除确认框 -->
	<myModel v-model:show="modelData.show" :title="modelData.title" :content="modelData.content"
		:confirmText="modelData.confirmText" :cancelText="modelData.cancelText" @cancel="cancelModel"
		@confirm="confirmModel">
		<view class="model_content">
			删除讣告后无法恢复，已经生成的分享也
			<br />无法查看是否确认删除
		</view>
	</myModel>
</template>

<script setup>
	import navigatorComp from '/components/navigator/index.vue';
	import myModel from '/components/model/index.vue';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import HomeApi from '@/API/home/index.js'
	const homeApi = new HomeApi();
	onReady(() => {
		uni.createSelectorQuery()
			.select('.header').boundingClientRect((res) => {
				height.value =
					uni.getSystemInfoSync().screenHeight -
					getApp().globalData.bottom -
					res.height -
					uni.upx2px(48) -
					getApp().globalData.statusBarHeight + 'px';
			}).exec();

	});
	const {
		downCallback,
		getMescroll,
		mescrollInit
	} = useMescroll() // 调用mescroll的hook

	// 更多按钮
	const showMoreFunc = ref(false);
	const moreBtnStyle = {
		height: '120rpx',
		borderRadius: '26rpx 26rpx 26rpx 26rpx',
		backgroundColor: '#fff',
		fontWeight: '400',
		fontSize: '40rpx',
		color: '#007AFF',
		marginBottom: '16rpx'
	};
	//删除模态框
	const modelData = reactive({
		show: false,
		title: '删除讣告',
		confirmText: '确定',
		cancelText: '取消'
	});
	let list = ref([])
	let height = ref(0)
	let clickItem = ref({})

	function formatDate(dateString) {
		const date = new Date(dateString);
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		const day = date.getDate();
		return `${year}年${month}月${day}日`;
	}
	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};

	const showMore = (item) => {
		showMoreFunc.value = true;
		clickItem.value = item
	};

	const closeMore = () => {
		showMoreFunc.value = false;
	};

	const delObituary = () => {
		showMoreFunc.value = false;
		modelData.show = true
	}

	const cancelModel = () => {
		modelData.show = false
	}

	const confirmModel = () => {
		homeApi.deleteBituaryApi({
			obituaryId: clickItem.value.id
		}).then((res) => {
			getMescroll().resetUpScroll()
			uni.showToast({
				title: '删除成功'
			})
		}).catch(() => {})
		modelData.show = false
	}
	const upCallback = (mescroll) => {
		homeApi.getListoBituaryApi({
			pageIndex: mescroll.num,
			reqNum: mescroll.size,
		}).then((res) => {
			const curPageData = res.data.obituaryList || [] // 当前页数据
			// curPageData.forEach((ele) => {
			// 	ele.createdAt = formatDate(ele.createdAt)
			// 	ele.decedentTime = formatDate(ele.decedentTime)
			// 	ele.mournTime = formatDate(ele.mournTime)
			// })
			if (mescroll.num == 1) list.value = []; // 第一页需手动制空列表
			list.value = list.value.concat(curPageData); //追加新数据
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		}).catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		})
	}
	
	/**
	 * 前往海报页
	 */
	const goPoster = (item)=>{
		goUrl(`/subPages/home/obituary/poster?id=${item.id}&&formData=` + JSON
			.stringify(
				item))
	}
</script>

<style lang="scss">
	page {
		background-color: #121512;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.content {
		background-color: #121512;
		padding: 0;
	}

	.model_content {
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		line-height: 36rpx;
		text-align: center;
	}

	.obituary_content_box {
		margin: 24rpx 32rpx;
		background: linear-gradient(225deg, #292b2a 0%, #8a918e 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 34rpx 24rpx 32rpx 32rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #ffffff;

		.obituary_content_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 38rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.obituary_content_content {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 42rpx;
			text-align: justified;
			text-indent: 2ch;
		}
	}
</style>